import { connect } from 'dva'
import DocumentTitle from 'react-document-title'
import Header from '../../components/Layout/HeadColumn'
import styles from './index.scss'
import ReactSVG from 'react-svg'
import router  from 'umi/router'
const HomePage = () => {
  const headerData = {
    staticTitle: '业务办理首页',
    staticModule: ['HeadColumn-01']
  }
  const jumpPage = (pathname) => {
    router.push({
      pathname: pathname
    })
  }
  return (
    <DocumentTitle title="业务办理首页">
      <div className={styles.homePageContainer}>
        <Header {...headerData} />
        <div className={styles.containerSize}>
          <div className={styles.headerTitle}>
            <span className={styles.symbol} />
            <span>天天增</span>
          </div>
          <div className={styles.contentContainer}>
            <div className={styles.symbolContainer} onClick={() => jumpPage('./modifyPhone')}>
              <ReactSVG
                svgClassName={styles.svgSize}
                src="svg/homepage/processPhone.svg"
              />
              修改手机号码
            </div>
            <div
              className={styles.symbolContainer}
              style={{ marginRight: '0' }}
            >
              <ReactSVG
                svgClassName={styles.svgSize}
                src="svg/homepage/processBasic.svg"
              />
              修改基本信息
            </div>
            <div className={styles.rightSymbolContainer} onClick={() => jumpPage('/resetPassword')}>
              <ReactSVG
                svgClassName={`${styles.svgSize} ${styles.redPwd}`}
                src="svg/homepage/processPwd.svg"
              />
              交易密码重置
            </div>
          </div>
        </div>

        <div className={`${styles.containerSize} ${styles.spacing}`}>
          <div className={styles.headerTitle}>
            <span className={styles.symbol} />
            <span>个人信息</span>
          </div>
          <div className={styles.contentContainer}>
            <div className={styles.symbolContainer}>
              <div className={styles.symbolSpacing} onClick={() => jumpPage('./baseInfoModify')}>
                <ReactSVG
                  svgClassName={styles.svgSize}
                  src="svg/homepage/processBasic.svg"
                />
                修改基本信息
              </div>
              <div className={styles.symbolSpacing} onClick={() => jumpPage('/modifyFundPassword')}>
                <ReactSVG
                  svgClassName={styles.svgSize}
                  src="svg/homepage/processMoneyPwd.svg"
                />
                修改资金密码
              </div>
              <div onClick={() => jumpPage('/riskEvaluate')}>
                <ReactSVG
                  svgClassName={styles.svgSize}
                  src="svg/homepage/processRisk.svg"
                />
                风险测评
              </div>
            </div>
            <div
              className={styles.symbolContainer}
              style={{ marginRight: '0' }}
            >
              <div className={styles.symbolSpacing} onClick={() => jumpPage('/modifyPhone')}>
                <ReactSVG
                  svgClassName={styles.svgSize}
                  src="svg/homepage/processPhone.svg"
                />
                修改手机号码
              </div>
              <div className={styles.symbolSpacing} onClick={() => jumpPage('/cardUpdate')}>
                <ReactSVG
                  svgClassName={styles.svgSize}
                  src="svg/homepage/processCardUpdate.svg"
                />
                身份证信息更新
              </div>
              <div>
                <ReactSVG
                  svgClassName={styles.svgSize}
                  src="svg/homepage/processClientReview.svg"
                />
                客户回访
              </div>
            </div>
            <div className={styles.rightSymbolContainer}>
              <div className={styles.symbolSpacing} onClick={() => jumpPage('/resetPassword')}>
                <ReactSVG
                  svgClassName={styles.svgSize}
                  src="svg/homepage/processPwd.svg"
                />
                交易密码重置
              </div>
              <div onClick={() => jumpPage('/cardUpgrade')}>
                <ReactSVG
                  svgClassName={styles.svgSize}
                  src="svg/homepage/processCardUpgrade.svg"
                />
                身份证升迁
              </div>
            </div>
          </div>
        </div>

        <div className={`${styles.containerSize} ${styles.spacing}`}>
          <div className={styles.headerTitle}>
            <span className={styles.symbol} />
            <span>交易权限开通</span>
          </div>
          <div className={styles.contentContainer}>
            <div className={styles.symbolContainer}>
              <div className={styles.symbolSpacing} onClick={() => jumpPage('/contractSign')}>
                <ReactSVG
                  svgClassName={styles.svgSize}
                  src="svg/homepage/processContract.svg"
                />
                电子合同签署
              </div>
              <div className={styles.symbolSpacing} onClick={() => jumpPage('/cardUpdate')}>
                <ReactSVG
                  svgClassName={styles.svgSize}
                  src="svg/homepage/processCardUpdate.svg"
                />
                身份证信息更新
              </div>
            </div>
            <div
              className={styles.symbolContainer}
              style={{ marginRight: '0' }}
            >
              <div className={styles.symbolSpacing}>
                <ReactSVG
                  svgClassName={styles.svgSize}
                  src="svg/homepage/processBasic.svg"
                />
                修改基本信息
              </div>
              <div className={styles.symbolSpacing} onClick={() => jumpPage('/resetPassword')}>
                <ReactSVG
                  svgClassName={styles.svgSize}
                  src="svg/homepage/processPwd.svg"
                />
                交易密码重置
              </div>
            </div>
            <div className={styles.rightSymbolContainer} onClick={() => jumpPage('/cardUpgrade')}>
              <div className={styles.symbolSpacing}>
                <ReactSVG
                  svgClassName={styles.svgSize}
                  src="svg/homepage/processCardUpgrade.svg"
                />
                身份证升迁
              </div>
              <div>
                <ReactSVG
                  svgClassName={styles.svgSize}
                  src="svg/homepage/processBasic.svg"
                />
                修改基本信息
              </div>
            </div>
          </div>
        </div>
      </div>
    </DocumentTitle>
  )
}

export default connect(state => state.modules)(HomePage)
